<template>
	<view class="by-list">
		<view class="by-item"  v-for="item in list" :key="item.id">
			<view class="by-detail">
				<view class="by-name w-100">
					{{item.groupBuyTypeName}}
				</view>
				<view class="w-50">
					成团人数: {{item.needCount}} 人
				</view>
				<view class="w-50">
					当前人数: {{item.currentCount}} 人
				</view>
				<view class="w-50">
					开团日期: {{item.creationTime | formatDate}}
				</view>
				<view class="w-50">
					截止日期: {{item.endDate | formatDate}}
				</view>
			</view>
			<button @click="toBuyDetail(item)" class="btn btn-detail" type="default">详情</button>
			<button v-if="item.creatorUserId != user.id" @click="JoinGroup(item)" class="btn btn-join" type="default">参团</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"group-list",
		props:{
			list:Array,
		},
		data() {
			return {
				
			};
		},
		methods:{
			toBuyDetail(item){
				uni.navigateTo({
					url: '/pages/group-detail/group-detail?group=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			JoinGroup(item){
				let self = this;
				if (!this.hasLogin) {
					uni.navigateTo({
						url: "../login/login"
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/join-group/join-group?id=' + item.id,
					events:{
						joinGroupSuccess(){
							self.getGroup();
						}
					}
				})
			},
		},
		computed:{
			user() {
				return this.$store.state.session.user;
			},
			hasLogin() {
				return this.$store.state.session.hasLogin;
			}
		}
	}
</script>

<style lang="scss">
.by-list{
		padding: 24rpx;
		.by-item {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: stretch;
			padding: 14rpx 0;
			border-bottom: 1px solid $uni-border-color;
			&:first-child{
				border-top: 1px solid $uni-border-color;
			}
			.by-detail {
				flex-grow: 1;
				display: flex;
				flex-wrap: wrap;
				font-size: 10px;
				color: #999999;
				.by-name {
					font-size: 14px;
					color: #333333;
				}
			}
			.btn {
				margin: 0;
				font-size: 14px;
				border: 0;
				border-radius: 0;
				width: 140rpx;
				color: #FFFFFF;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.btn-detail {
				background-color: $uni-color-warning;
			}
			
			.btn-join {
				background-color: $uni-color-primary;
			}
			.iconfont {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
}
</style>
